<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>资讯</title>
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.min.css">
    <style type="text/css">
    /*手机项目*/
    /*iphone5*/
    
    @media screen and (min-width:320px) and (max-width:374px) {
        html {
            font-size: 16px
        }
    }
    /*iphone6  6+*/
    
    @media screen and (min-width:375px) and (max-width:414px) {
        html {
            font-size: 19px
        }
    }
    /*你iphone6+还要大的*/
    
    @media screen and (min-width:415px) and (max-width:639px) {
        html {
            font-size: 20px
        }
        .imgbox {
            height: 160px;
            line-height: 160px;
        }
        .imgbox img {
            width: 90%;
            max-width: 12rem;
            padding-left: 8%;
            height: 140px;
        }
    }
    /*ipad  768*/
    
    @media screen and (min-width:640px) and (max-width:799px) {
        html {
            font-size: 25px
        }
        .box {
            width: 86%;
            margin: 7%;
        }
        .imgbox {
            height: 160px;
            line-height: 160px;
        }
        .imgbox img {
            width: 90%;
            max-width: 12rem;
            padding-left: 8%;
            height: 140px;
        }
    }
    
    @media screen and (min-width:800px) {
        html {
            font-size: 25px
        }
        .box {
            width: 70%;
            margin: 15%;
            margin-top: 30px;
        }
        .imgbox {
            height: 180px;
            line-height: 180px;
        }
        .imgbox img {
            width: 90%;
            max-width: 12rem;
            padding-left: 8%;
            height: 150px;
        }
    }
    /*手机项目*/
    
    .titlebox {
        font-size: 18px;
        font-weight: bold;
        padding: 1rem;
        line-height: 1.3rem;
        letter-spacing: 2px;
    }
    
    .timebox {
        /*margin-top: 1rem;*/
        color: gray;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .timebox span {
        display: inline-block;
        margin-left: 1rem;
    }
    
    .contentbox {
        padding: 1rem;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="titlebox">
            {{article.title}}
         <!--    今天天气好 -->
        </div>
        <div class="timebox">
            {{article.createTime}}
           <span>
           <!-- {{article.type}} -->
           <!-- 摊位出租 -->
           </span>
        </div>
        <div class="contentbox">
           
        </div>
    </div>
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <!--<script src="dist/sys.js"></script>-->
    <script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function errorPrecess(ret) {

        alert(ret.message);

    }


    $(function() {
        var articleId = getUrlParam('id');
        var box = new Vue({
            el: '.box',
            data: {
                article: {},
                typelist: [{
                    value: 1,
                    text: '临检仪器'
                }, {
                    value: 2,
                    text: '生化免疫'

                }, {
                    value: 3,
                    text: '细菌PCR'
                }, {
                    value: 4,
                    text: '仪器SOP'
                }, {
                    value: 5,
                    text: '预防保全'
                }, {
                    value: 6,
                    text: '校准'
                }]


            },
            methods: {
                getArticleDetail: function(articleId) {
                    $.ajax({
                        type: "GET",
                        url: "../article/getNewsDetail?id=" + articleId,
                        dataType: "json",
                        success: function(ret) {
                            console.log(ret);
                            if (ret.code == 0) {
                                if (ret.data != null) {

                                    var time = new Date(parseInt(ret.data.createTime)).toLocaleString().replace(/:\d{1,2}$/, ' ');
                                    console.log(time);
                                    ret.data.createTime = time;
                                    $.each(box.typelist, function(index, val) {
                                        if (val.value == ret.data.type) {
                                            ret.data.type = val.text;

                                        }
                                    });
                                    // this.article=ret.data;

                                    box.$set(box.article, "title", ret.data.title);
                                    box.$set(box.article, "content", ret.data.content);
                                    box.$set(box.article, "createTime", ret.data.createTime);
                                    // box.$set(box.article, "type", ret.data.type);
                                    $(".contentbox").append(box.article.content);

                                } else {
                                    alertf("数据已删除！")
                                }
                            } else {
                                errorPrecess(ret);
                            }
                        }
                    });


                }
            }

        })
        box.getArticleDetail(articleId);
    })
    </script>
</body>

</html>
